<template>
	<view class="flex shop-container">
		<view class="shop-image-container">
			<view class="shop-image">
				<image src="http://shop.lol2526.com/uploads/copy/b5ab2f38976a10618dfb1a68ea99dcec.jpg" mode="widthFix" class="image"></image>
			</view>
			<view class="score-container">
				<view class="image-score">
					4.9 <text>分</text>
				</view>
				<view class="score-text">
					好吃个锤子好吃个锤子好吃个锤子
				</view>
			</view>
		</view>
		<view class="info">
			<view class="title">
				不知道什么店
			</view>
			<view class="detail flex">
				<view class="left flex">
					<view class="score">
						4.9分
					</view>
					<view class="sales">
						月售200+
					</view>
				</view>
				<view class="right flex">
					<view class="">
						xxx
					</view>
				</view>
			</view>
			<view class="goods-list">
				<scroll-view 
					class="shop-scroll"
					scroll-x="true" 
					style="white-space: nowrap;" 
					scroll-with-animation show-scrollbar="true"
				>
					<div class="scroll-container" @click="onGodds">
						<view class="goods-item">
							<view class="goods-image">
								<image src="http://shop.lol2526.com/uploads/copy/b5ab2f38976a10618dfb1a68ea99dcec.jpg" mode="widthFix" class="image"></image>
							</view>
							<view class="goods-detail">
								<view class="goods-title">
									不知道叫什么
								</view>
								<view class="goods-money">
									<text class="money-sign">￥</text>52.07
								</view>
							</view>
						</view>
						<view class="goods-item">
							<view class="goods-image">
								<image src="http://shop.lol2526.com/uploads/copy/b5ab2f38976a10618dfb1a68ea99dcec.jpg" mode="widthFix" class="image"></image>
							</view>
							<view class="goods-detail">
								<view class="goods-title">
									不知道叫什么
								</view>
								<view class="goods-money">
									<text class="money-sign">￥</text>52.07
								</view>
							</view>
						</view>
						<view class="goods-item">
							<view class="goods-image">
								<image src="http://shop.lol2526.com/uploads/copy/b5ab2f38976a10618dfb1a68ea99dcec.jpg" mode="widthFix" class="image"></image>
							</view>
							<view class="goods-detail">
								<view class="goods-title">
									不知道叫什么
								</view>
								<view class="goods-money">
									<text class="money-sign">￥</text>52.07
								</view>
							</view>
						</view>
						<view class="goods-item">
							<view class="goods-image">
								<image src="http://shop.lol2526.com/uploads/copy/b5ab2f38976a10618dfb1a68ea99dcec.jpg" mode="widthFix" class="image"></image>
							</view>
							<view class="goods-detail">
								<view class="goods-title">
									不知道叫什么
								</view>
								<view class="goods-money">
									<text class="money-sign">￥</text>52.07
								</view>
							</view>
						</view>
						<view class="loadmore">
							<view class="icon">
								
							</view>
							<view class="loadmore-text">
								查看更多
							</view>
						</view>
					</div>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				
			}
		},
		methods:{
			onGodds(id){
				console.log("XXX")
			}
		}
	}
</script>

<style lang="scss" scoped>
.image{
	height: 100%;
	width: 100%;
}
.shop-image{
	height: 200rpx;
	width: 200rpx;
	border-radius: 12rpx;
	overflow: hidden;
}
.shop-container{
	background-color: white;
	margin: 10rpx 20rpx;
	border-radius: 16rpx;
	padding: 12rpx 18rpx;
	.shop-image-container{
		width: 200rpx;
		background-color: rgb(255, 253, 238);
		.score-container{
			padding: 8rpx 12rpx;
			.image-score{
				font-weight: bold;
				font-size: 36rpx;
				color: rgb(232, 151, 64);
			}
			.score-text{
				font-weight: bold;
				font-size: 28rpx;
			}
		}
	}
}
.info{
	margin-left: 8rpx;
	flex-grow: 1;
	width: calc(100% - 8rpx - 200rpx );
	.title{
		font-weight: bold;
		font-size: 36rpx;
	}
	.detail{
		justify-content: space-between;
		.score{
			color: rgb(288, 115, 35);
			font-weight: bold;
		}
		.sales{
			margin-left: 12rpx;
			color: #999;
		}
	}
	.goods-list{
		width: 100%;
		overflow: hidden;
		margin-top: 12rpx;
		.shop-scroll{
			// flex-grow: 1;
		}
		.scroll-container{
			width: fit-content;
			display: flex;
			flex-wrap: nowrap;
			overflow: hidden;
			padding-right: 12rpx;
		}
		.goods-item{
			margin-right: 12rpx;
			// text-align: center;
			width: 160rpx;
			.goods-image{
				height: 160rpx;
				width: 160rpx;
				margin: auto;
			}
			.goods-detail{
				.goods-title{
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 28rpx;
					font-weight:bold;
				}
				.goods-money{
					color: rgb(201, 96, 86);
					font-weight: bold;
					.money-sign{
						font-size: 24rpx;
					}
				}
			}
		}
		.loadmore{
			padding: 6rpx 12rpx;
			background-color: #f6f6f6;
			border-radius: 8rpx;
			height: 160rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.loadmore-text{
				white-space: wrap;
				text-orientation: upright;
				font-size: 24rpx;
			}
		}
	}
}
</style>